<!-- 问题详情 -->
<template>
	<view class="page" v-show="isLoaded">
		<!-- 问题 -->
		<Question :detail="detail"></Question>
		<!-- tabs -->
		<view class="tabs">
			<text class="tab" v-for="item in tabs" :key="item.value" :class="{'active': item.value === tabValue}"
				@click="handleChangeTab(item)">
				{{item.name}}
			</text>
		</view>
		<!-- 专家回答 -->
		<Answer v-if="tabValue === '1'" :detail="detail"></Answer>
		<!-- 推荐药品 -->
		<Recommend v-if="tabValue === '2'"></Recommend>
	</view>
</template>

<script setup>
	import api from "@/api/index.js";
	import { onLoad, onShareAppMessage } from "@dcloudio/uni-app"
	import { ref } from "vue";
	import Question from './components/question.vue';
	import Answer from "./components/answer.vue";
	import Recommend from "./components/recommend.vue";

	onShareAppMessage(() => {
		return {
			title: detail.value.title,
			path: '/pagesC-my/ask-detail/index',
			imageUrl: detail.value.photo_list && detail.value.photo_list[0] || ''
		}
	});

	onLoad((options) => {
		if (!options.id) return uni.showNoneToast('缺少参数');
		id.value = options.id;
		getDetail(id.value)
	})

	const id = ref('');
	const isLoaded = ref(false);
	const detail = ref({});
	const tabValue = ref('1');
	const tabs = ref([{ name: '专家解答', value: '1' }, { name: '推荐药品', value: '2' }]);

	// 获取详情数据
	const getDetail = async (id) => {
		uni.showLoading({ title: '加载中...' });
		const res = await api.c_ask_api.info({ id }).finally(() => setTimeout(uni.hideLoading, 100));

		isLoaded.value = true;
		detail.value = res.data.data;
	}

	// 切换tab
	const handleChangeTab = (item) => {
		tabValue.value = item.value;
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 30rpx;
	}

	.tabs {
		display: flex;
		align-items: flex-end;
		padding: 35rpx 25rpx;
		background-color: #f5f5f5;
		box-sizing: border-box;

		.tab {
			font-size: 28rpx;
			color: #666666;

			&+.tab {
				margin-left: 30rpx;
			}

			&.active {
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
			}
		}
	}
</style>